<!-- 库房管理-出库管理-委外退料单---新增操作 -->
<script lang="ts">
import { reactive, ref, watch, nextTick } from "vue";
import { ElForm } from "element-plus";
import {
  querySendMaterialPage,
  querySendMaterialById
} from "/@/api/wms/sendMaterial";
import { addReturnMaterial } from "/@/api/wms/returnMaterial";
import { dateFormatYMD } from "/@/utils/date";
import { errorMessage, successMessage, alertMessage } from "/@/utils/message";
import { queryCodeNameByType } from "/@/api/log/interfaceLog";
export default {
  name: "addReturnMaterial",
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    // 添加
    const subItemData = reactive({
      loading: false,
      submitLoading: false,
      dialogShow: false,
      bnoTypeData: [] as any[],
      processData: [] as any[],
      listData: [] as any[],
      goodsData: [] as any[],
      storageData: [] as any[], //存储库房信息
      weightData: [] as any[], //成本单位
      numberData: [] as any[], //数量单位
      lengthData: [] as any[], //宽度单位长度单位
      userInfo: {} as any,
      makeDate: "",
      formData: {
        bnoNo: "",
        bnoType: "",
        createDate: "",
        id: 0,
        outSourceNo: "",
        receiptsType: "",
        sendReturnMaterialDetails: [],
        storeAddress: "",
        supplierCode: "",
        supplierName: "",
        remark: ""
      },
      formRules: {
        outSourceNo: [
          { required: true, message: "请选择委外发料单", trigger: "blur" }
        ],
        bnoType: [
          { required: true, message: "请选择单据类型", trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请选择制单日期", trigger: "blur" }
        ],
        supplierName: [
          { required: true, message: "请输入委外商", trigger: "blur" }
        ]
      }
    });

    watch(props, n => {
      console.log(props);
      subItemData.dialogShow = n.dialogShow;
      if (subItemData.dialogShow) {
        queryType("委外退料");
        subItemData.formData.createDate =
          dateFormatYMD(new Date()) + " 00:00:00";
      }
    });
    // 出库表单提交
    const insertForm = ref<InstanceType<typeof ElForm>>();
    const submitEvent = () => {
      insertForm.value.validate(valid => {
        if (valid) {
          if (subItemData.formData.sendReturnMaterialDetails.length == 0) {
            alertMessage("请填写详情信息", "提示");
            return;
          }
          subItemData.submitLoading = true;
          // 新增
          addReturnMaterial(subItemData.formData)
            .then((res: any) => {
              if (res.code === 0) {
                subItemClose();
                ctx.emit("searchEvent");
                successMessage("新增成功");
              } else {
                subItemData.submitLoading = false;
                errorMessage(res.message);
              }
            })
            .catch(() => {
              errorMessage("操作失败");
              subItemData.submitLoading = false;
            });
        }
      });
    };

    const subItemClose = () => {
      nextTick(() => {
        subItemData.formData = {
          bnoNo: "",
          bnoType: "",
          createDate: "",
          id: 0,
          outSourceNo: "",
          receiptsType: "",
          sendReturnMaterialDetails: [],
          storeAddress: "",
          supplierCode: "",
          supplierName: "",
          remark: ""
        };
        subItemData.submitLoading = false;
        subItemData.dialogShow = false;
        insertForm.value.resetFields();
      });
      ctx.emit("addReturnMaterialClose", false);
    };
    // 获取单据类型
    const queryType = (code: any) => {
      queryCodeNameByType(code).then((res: any) => {
        if (res.code == 0) {
          subItemData.bnoTypeData = res.data;
        }
      });
    };
    // 选择订单弹窗绑定数据
    const chooseOrder = reactive({
      dialogShow: false, //操作显示隐藏
      loading: false,
      detailData: [] as any[],
      orderId: 0,
      tableHeight: 0,
      totalCount: 0, //总数
      formData: {
        date: "" as any,
        bnoNo: "",
        bnoType: "",
        supplierName: "",
        finishFlag: "" as any,
        deliveryTime: "" as any,
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      }
    });
    const chooseOrderShow = () => {
      chooseOrder.detailData = [];
      chooseOrder.dialogShow = true;
      nextTick(() => {
        chooseOrder.tableHeight =
          document.getElementById("orderForm").clientHeight + 40;
      });
      queryOrderSelect();
    };
    const queryOrderSelect = () => {
      chooseOrder.loading = true;
      const data: any = {};
      Object.assign(data, chooseOrder.formData);
      subItemData.loading = true;
      data.finishFlag =
        chooseOrder.formData.finishFlag === "" ||
        chooseOrder.formData.finishFlag == -1
          ? -1
          : chooseOrder.formData.finishFlag;

      if (chooseOrder.formData.date) {
        data.startMakeDate =
          dateFormatYMD(chooseOrder.formData.date[0]) + " 00:00:00";
        data.endMakeDate =
          dateFormatYMD(chooseOrder.formData.date[1]) + " 23:59:59";
      } else {
        data.startMakeDate = "";
        data.endMakeDate = "";
      }
      delete data.date;
      if (chooseOrder.formData.deliveryTime) {
        data.startDeliveryTime =
          dateFormatYMD(chooseOrder.formData.deliveryTime[0]) + " 00:00:00";
        data.endDeliveryTime =
          dateFormatYMD(chooseOrder.formData.deliveryTime[1]) + " 23:59:59";
      } else {
        data.startDeliveryTime = "";
        data.endDeliveryTime = "";
      }
      delete data.deliveryTime;
      querySendMaterialPage(chooseOrder.formData).then((res: any) => {
        if (res.code == 0) {
          chooseOrder.detailData = res.data && res.data.list;
          chooseOrder.totalCount = res.data && res.data.total;
        }
        chooseOrder.loading = false;
      });
    };
    const chooseOrderClose = () => {
      chooseOrder.dialogShow = false;
      chooseOrder.detailData = [];
      chooseOrder.formData = {
        date: "" as any,
        bnoNo: "",
        bnoType: "",
        supplierName: "",
        finishFlag: "" as any,
        deliveryTime: "" as any,
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      };
      chooseOrder.totalCount = 0; //总数
    };
    const handleSizeChange = val => {
      //改变每页数量
      chooseOrder.formData.pageRow = val;
      handleFilter(1);
    };
    const handleCurrentChange = val => {
      //改变页码
      handleFilter(val);
    };
    const handleFilter = val => {
      //查询事件
      chooseOrder.formData.pageNum = val;
      queryOrderSelect();
    };
    const handleSelectionChange = val => {
      console.log(val);
      if (val) {
        chooseOrder.orderId = val.id;
      }
    };
    // 点击确定
    const chooseOrderSure = () => {
      querySendMaterialById(chooseOrder.orderId).then((res: any) => {
        if (res.code === 0) {
          subItemData.formData.id = 0;
          subItemData.formData.outSourceNo = res.data.bnoNo;
          subItemData.formData.supplierCode = res.data.supplierCode;
          subItemData.formData.supplierName = res.data.supplierName;
          subItemData.formData.sendReturnMaterialDetails =
            res.data.sendOutMaterialDetails;
          for (var i in subItemData.formData.sendReturnMaterialDetails) {
            subItemData.formData.sendReturnMaterialDetails[i].backFillNum = 0;
            subItemData.formData.sendReturnMaterialDetails[i].backDeductNum = 0;
          }
        } else {
          errorMessage(res.message);
        }
      });
      chooseOrderClose();
    };
    // 双击选中
    const dobuleClick = val => {
      handleSelectionChange(val);
      chooseOrderSure();
    };
    return {
      subItemData,
      insertForm,
      submitEvent,
      subItemClose,
      chooseOrder,
      chooseOrderShow,
      queryOrderSelect,
      chooseOrderClose,
      handleSizeChange,
      handleCurrentChange,
      handleFilter,
      handleSelectionChange,
      chooseOrderSure,
      dobuleClick
    };
  }
};
</script>
<template>
  <!-- 表单弹框 -->
  <el-dialog
    v-model="subItemData.dialogShow"
    title="新增&保存"
    width="80%"
    top="7vh"
    :before-close="subItemClose"
    :close-on-click-modal="false"
  >
    <el-form
      ref="insertForm"
      :model="subItemData.formData"
      :rules="subItemData.formRules"
      label-align="right"
      label-width="120px"
    >
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="outSourceNo" label="委外发料单">
            <el-input
              v-model="subItemData.formData.outSourceNo"
              placeholder="点击选择委外发料单"
              @click="chooseOrderShow"
              size="small"
              readonly
            ></el-input>
            <!-- readonly -->
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="bnoType" label="单据类型">
            <el-select
              size="small"
              style="width: 100%"
              clearable
              v-model="subItemData.formData.bnoType"
              placeholder="请选择单据类型"
            >
              <el-option
                v-for="item in subItemData.bnoTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="createDate" label="制单日期">
            {{
              subItemData.formData.createDate
                ? subItemData.formData.createDate.split(" ")[0]
                : ""
            }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="supplierName" label="委外商编码">
            <el-input
              v-model="subItemData.formData.supplierName"
              placeholder="请输入委外商编码"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="supplierCode" label="委外商编码">
            <el-input
              v-model="subItemData.formData.supplierCode"
              placeholder="请输入委外商编码"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="remark" label="备注">
        <el-input
          type="textarea"
          v-model="subItemData.formData.remark"
          placeholder="请输入备注"
          size="small"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="subItemData.formData.sendReturnMaterialDetails"
      border
      fit
      size="mini"
      highlight-current-row
      tooltip-effect="dark"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="lineNo" label="行号" width="100"></el-table-column>
      <el-table-column
        prop="sourceNo"
        label="来源单号"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="materialName"
        label="品名"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="materialCode"
        label="料号"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="规格"
        width="150"
        prop="specification"
      ></el-table-column>
      <el-table-column label="长度(单位)" width="90">
        <template #default="{ row }">
          {{ row.longt
          }}{{
            row.longt && row.lengthUnitCN ? "(" + row.lengthUnitCN + ")" : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="宽度(单位)" width="90">
        <template #default="{ row }">
          {{ row.width
          }}{{
            row.width && row.widthUnitCN ? "(" + row.widthUnitCN + ")" : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="厚度/高度(单位)" width="120">
        <template #default="{ row }">
          {{ row.thickness
          }}{{
            row.thickness && row.thicknessUnitCN
              ? "(" + row.thicknessUnitCN + ")"
              : ""
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="成本(单位)" width="90">
        <template #default="{ row }">
          {{ row.weight
          }}{{
            row.weight && row.weightUnitCN ? "(" + row.weightUnitCN + ")" : ""
          }}
        </template>
      </el-table-column> -->
      <el-table-column label="发料数量(单位)" min-width="120">
        <template #default="{ row }">
          {{ row.procurementNum
          }}{{
            row.procurementNum && row.procurementUnit
              ? "(" + row.procurementUnit + ")"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="发料重量(单位)" min-width="120">
        <template #default="{ row }">
          {{ row.procurementWeight
          }}{{
            row.procurementWeight && row.weightUnit
              ? "(" + row.weightUnit + ")"
              : ""
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="实退数量" width="140">
        <template #default="{ row }">
          <el-input-number
            :min="0"
            size="small"
            v-model="row.pcsNum"
            placeholder="请输入"
          ></el-input-number>
        </template>
      </el-table-column> -->
      <el-table-column label="退料理由" width="200">
        <template #default="scope">
          <el-input
            v-model="scope.row.reason"
            size="small"
            style="width: 100%"
            placeholder="请输入退料理由"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <vxe-button @click="subItemClose">取 消</vxe-button>
      <vxe-button
        status="primary"
        :disabled="subItemData.submitLoading"
        @click="submitEvent"
        >确 定</vxe-button
      >
    </template>
  </el-dialog>
  <!-- 弹框选择委外发料单 -->
  <el-dialog
    v-model="chooseOrder.dialogShow"
    title="委外发料单"
    width="70%"
    top="9vh"
    :before-close="chooseOrderClose"
    :close-on-click-modal="false"
  >
    <el-form
      id="orderForm"
      ref="orderForm"
      :model="chooseOrder.formData"
      label-align="right"
      label-width="80px"
    >
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="单号" prop="bnoNo">
            <el-input
              v-model="chooseOrder.formData.bnoNo"
              clearable
              @keyup.enter="queryOrderSelect"
              placeholder="请输入单号"
              size="small"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="委外商" prop="supplierName">
            <el-input
              v-model="chooseOrder.formData.supplierName"
              clearable
              @keyup.enter="queryOrderSelect"
              placeholder="请输入委外商"
              size="small"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="制单日期" prop="date">
            <el-date-picker
              v-model="chooseOrder.formData.date"
              size="small"
              style="width: 100%"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="queryOrderSelect"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="交期" prop="deliveryTime">
            <el-date-picker
              v-model="chooseOrder.formData.deliveryTime"
              size="small"
              style="width: 100%"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="queryOrderSelect"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="状态" prop="finishFlag">
            <el-select
              v-model="chooseOrder.formData.finishFlag"
              filterable
              clearable
              placeholder="请选择状态"
              size="small"
              style="width: 100%"
            >
              <el-option label="完成" :value="1">完成</el-option>
              <el-option label="待办" :value="0">待办</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label-width="0px">
            <el-button type="primary" size="small" @click="queryOrderSelect"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      stripe
      v-loading="chooseOrder.loading"
      :data="chooseOrder.detailData"
      border
      fit
      :height="'calc(100% - ' + chooseOrder.tableHeight + 'px)'"
      size="mini"
      highlight-current-row
      tooltip-effect="dark"
      @row-dblclick="dobuleClick"
      @current-change="handleSelectionChange"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column
        prop="bnoNo"
        label="单号"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="bnoTypeName"
        label="单据类型"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="supplierName"
        label="委外商"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="deliveryTime" label="交期" width="110">
        <template #default="{ row }">
          {{ row.deliveryTime ? row.deliveryTime.split(" ")[0] : "" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="sourceCategory"
        label="来源类别"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="sourceDocuments"
        label="来源单据"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="createUserCode"
        label="制单人"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="createDate" label="制单日期" width="100">
        <template #default="{ row }">
          {{ row.createDate ? row.createDate.split(" ")[0] : "" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.finishFlag == 1">完成</el-tag>
          <el-tag type="warning" v-if="row.finishFlag == 0">待办</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="chooseOrder.formData.pageNum"
      :page-sizes="[10, 15, 20, 30, 40, 50]"
      :page-size="chooseOrder.formData.pageRow"
      layout="total, sizes, prev, pager, next, jumper"
      :total="chooseOrder.totalCount"
    ></el-pagination>
    <template #footer>
      <el-button @click="chooseOrderClose" size="small">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        v-if="chooseOrder.orderId"
        @click="chooseOrderSure"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
